<template>
	<view class="all-main">
		<view class="main">
			<view class="lists">
				<view class="sms_sign">
					<u--image :src="sms_sign" width="300" height="140" mode="widthFix"></u--image>
				</view>
				<view class="items">
					<view class="lefts">
						<text>商户名称</text>
					</view>
					<view class="rights">
						<text>{{merchant.busName}}</text>
					</view>
				</view>
				<view class="items">
					<view class="lefts">
						<text>商户手机号</text>
					</view>
					<view class="rights">
						<text>{{merchant.custLogin}}</text>
					</view>
				</view>
				<view class="items">
					<view class="lefts">
						<text>验证码</text>
					</view>
					<view class="rights">
						<input type="number" v-model="merchant.checkCode" placeholder="请输入验证码">
						<text class="codes" @click="getCode">{{code_text}}</text>
					</view>
				</view>
				<view class="btns" @click="saveData">
					<text>短信签约</text>
				</view>
				<view class="agreement">
					<u-checkbox-group placement="column" @change="radioChange" shape="circle">
						<u-checkbox size="16" labelSize="12" activeColor="#f2873a" label="我已阅读并同意"
							:name="1"></u-checkbox>
					</u-checkbox-group>
					<text @click="agreement(1)">《特约商户银行卡业务受理协议》、</text>
					<text @click="agreement(2)">《豸信CA数字证书服务协议》、</text>
					<text @click="agreement(3)">《法大大电子签服务协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sms_sign: '/static/sms_sign.jpg',
				is_agreement: 1,
				code_text: '获取验证码',
				isDisabled: true,
				isSubmit: true,
				merchant: {
					id: '',
					pageSize: 3,
					busName: '',
					custLogin: '',
					checkCode: '',
					projectCode: '',
				}
			}
		},
		onLoad(e) {
			this.merchant.id = e.id
			this.getMerchantEntry()
		},
		methods: {
			// 获取商户进件信息
			async getMerchantEntry() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getMerchantEntry',
					data: {
						id: this.merchant.id
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.merchant = res.data
					this.merchant.pageSize = 5
					this.merchant.checkCode = ''
				}
			},
			// 点击获取验证码
			getCode() {
				if (this.is_agreement == 1) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none',
						duration: 3000
					})
					return false
				}
				uni.hideKeyboard() // 隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				let that = this;
				// 防止多次重复点击
				if (!that.isDisabled) {
					return false;
				}
				this.code_text = "发送中..." // 发送验证码
				this.isDisabled = false;
				// 示例用定时器模拟请求效果
				// setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					this.setTimer();
				}, 1000)
			},
			// 验证码的定时器
			setTimer() {
				// 发送请求
				this.V_Code()
			},
			// 获取验证码请求
			async V_Code() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/sendCode',
					data: {
						id: this.merchant.id
					},
				});
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				if (res.code == 200) {
					clearInterval(this.getCode());
					let holdTime = 60; //定义变量并赋值
					this.code_text = "60s"
					//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
					//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
					this.Timer = setInterval(() => {
						if (holdTime <= 0) {
							this.isDisabled = true;
							this.getCodeBtnColor = "#ffffff";
							this.code_text = "获取验证码"
							clearInterval(this.Timer); //清除该函数
							return; //返回前面
						}
						this.code_text = holdTime + "s"
						holdTime--;
					}, 1000)
				} else {
					this.isDisabled = true;
					this.getCodeBtnColor = "#ffffff";
					this.code_text = "获取验证码"
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				}
			},
			// 点击同意
			radioChange(e) {
				if (e.length == 1) {
					this.is_agreement = 2
				} else {
					this.is_agreement = 1
				}
			},
			// 查看协议
			agreement(type) {
				uni.navigateTo({
					url: '/pages/index/guotong/agreement?type=' + type
				})
			},
			// 点击短信签约
			async saveData() {
				if (this.merchant.checkCode == '' || this.merchant.checkCode == null) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 3000
					})
					return false
				}
				if (this.isSubmit) {
					this.isSubmit = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp({
						url: 'v1/checkCode',
						data: {
							id: this.merchant.id,
							checkCode: this.merchant.checkCode
						}
					});
					this.isSubmit = true
					uni.hideLoading()
					if (res.code == 200) {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 3000
						// })
						uni.navigateTo({
							url: '/pages/index/guotong/success'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			padding: 30rpx;

			.lists {
				background-color: #ffffff;

				.sms_sign {
					display: flex;
					justify-content: center;
					padding-top: 30rpx;
				}

				.items {
					padding: 30rpx;
					display: flex;
					justify-content: space-between;

					.rights {
						width: 70%;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						input {
							width: 220rpx;
							text-align: center;
						}

						.codes {
							color: #f2873a;
							margin-left: 10rpx;
						}
					}
				}

				.btns {
					margin: 60rpx 30rpx 30rpx 30rpx;
					background-color: #f2873a;
					color: #ffffff;
					text-align: center;
					padding: 24rpx;
					border-radius: 16rpx;
				}

				.agreement {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 30rpx;
					line-height: 40rpx;

					.agree {
						color: #909399;
					}
				}
			}
		}
	}
</style>